import React, { Component, useState, useEffect } from "react"
import { useReducer } from "react"
import { Table, Button } from 'antd';
import Dialog from './form.jsx'
import { columns, data } from './tableList.js'
import { empoyList } from "@/api/empoylist"
function App(props) {
    const [dataList, setData] = useState(() => {
        return data || []
    })
    const [rouKeyId, setRowkey] = useState(() => {
        return props.defaultCount || []
    })
    const [hasSelected, setSelected] = useState(false)
    const [visible, setVisible] = useState(false);
    //只执行一次，[]
    useEffect(() => {
        empoyList().then((response) => {
            let data1 = response.data.data
            setData(data1)
        });
    }, [])
    //选择的列表方法
    const onSelectChange = (selectedRowKeys, selectedRows) => {
        console.log(selectedRows, '111')
        let list = selectedRows.map(item => {
            return item.id
        })
        if (list && list.length > 0) {
            setSelected(true)
        } else {
            setSelected(false)
        }
        setRowkey(list)
    }
    //表格配置
    const rowSelection = {
        selectedRowKeys: rouKeyId,
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            onSelectChange(selectedRowKeys, selectedRows)
        },
    }
    //取消弹框
    const cancleClick=()=>{
        setVisible(false);
    }
    //父组件打印
    const btnClick = () => {
        setVisible(true);
    }
    const data1=[1,2,3,4,5,6]
    return (
        <div>
            {
                visible && <Dialog visible={visible} cancleClick={cancleClick}>
                </Dialog>
            }
            <Button type="primary" onClick={btnClick} disabled={!hasSelected}>
                选择按钮
            </Button>
            <Table rowKey={record => record.id} rowSelection={rowSelection} columns={columns} dataSource={dataList} />
            <ul>
               { 
                data1.map((index)=>{
                  return <li key={index}>{index}</li>
                })
               }
            </ul>
        </div>
    )
}
export default App